import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";

import "./index.css";

class Progress extends React.Component {
  static defaultProps = {
    type: 'line',
    strokeWidth: 14,
    borderRadius: 10,
    status: 'normal',
    // strokeColor: 'black'
  }

  renderProgress = () => {
    const { type } = this.props
    let progress
    if (type === 'line') {
      progress = <Line {...this.props}></Line>
    } else if (type === 'circle') {
      // todo:
      // progress = <Circle {...this.props}></Circle>
    }
    return (
      <>
        {progress}
      </>
    )
  }
  render() {
    return <>{this.renderProgress()}</>
  }
}

const Line = ({ persent, strokeWidth, strokeColor, status, borderRadius }) => {
  const classString = classNames('relative', {
    'bg-blue-600': !strokeColor && (status === 'normal' || status === 'active'),
    'bg-green-600': !strokeColor && status === 'success',
    'bg-red-600': !strokeColor && status === 'error',
  })

  const barStyle = {
    height: strokeWidth,
    width: `${validProgress(persent)}%`,
    borderRadius,
    background: strokeColor || undefined
  }

  const bgStyle = {
    borderRadius,
  }

  return (
    <div className="w-full flex items-center">
      <div className="w-full bg-gray-300" style={bgStyle}>
        <div className={classString} style={barStyle}>
          {status === 'active' && <div className={'absolute inset-0 bg-white animate-light-wipe'} style={bgStyle}></div>}
        </div>
      </div>
      <span className={'ml-2'}>{persent}%</span>
    </div >
  )
}

const validProgress = persent => Math.max(0, Math.min(persent, 100))

Progress.propTypes = {
  type: PropTypes.string,
  persent: PropTypes.number,
  strokeWidth: PropTypes.number,
  strokeColor: PropTypes.string,
  status: PropTypes.string,
  borderRadius: PropTypes.number,
}

export default Progress
